import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { WingBlank, WhiteSpace, List} from 'antd-mobile';

const ProfilePage = ({ dispatch, location, ...rest }) => {
  const entries = [{
    label: '个人资料',
    pathname: 'profile',
  }, {
    label: '绑定手机',
    pathname: 'mobile',
  }, {
    label: '修改密码',
    pathname: 'password',
  }];
  return (
    <WingBlank size="md">
      <WhiteSpace />
      <List>
        {entries.map((entry, i) =>
          <List.Item
            key={i}
            extra={entry.pathname === 'mobile' ? location.state.mobile : null}
            arrow="horizontal"
            onClick={() => dispatch(routerRedux.push({
              pathname: `${location.pathname}/${entry.pathname}`,
              state: { title: entry.label },
            }))}>
            {entry.label}
          </List.Item>
        )}
      </List>
    </WingBlank>
  );
};

export default connect()(ProfilePage);
